<template>
  <ElSubMenu :index="menu.path">
    <template #title>
      <ElIcon v-if="menu.menuIcon">
        <component :is="menu.menuIcon"></component>
      </ElIcon>
      <span>{{ menu.title }}</span>
    </template>
    <template v-for="item of menu.children" :key="item.path">
      <template v-if="item.children.length">
        <MenuItemSub :menu="item" :MenuItemSub="MenuItemSub" />
      </template>
      <template v-else>
        <ElMenuItem :index="item.path">
          <ElIcon v-if="item.menuIcon">
            <component :is="item.menuIcon"></component>
          </ElIcon>
          <span>
            {{ item.title }}
          </span>
        </ElMenuItem>
      </template>
    </template>
  </ElSubMenu>
</template>
<script lang="ts" setup>
import type { RouteMetaResolveRaw } from "@/utils";
defineProps<{
  menu: RouteMetaResolveRaw;

  MenuItemSub: any;
}>();
</script>
